<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-15 19:58:39
 * @FilePath: \vue3_test\src\App.vue
 * @Description: 父组件
-->
<template>
  <input type="text" v-model="keyWord" />
  <h3>{{ keyWord }}</h3>
</template>

<script>
import { customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义的一个ref名为: myRef
    function myRef(value, delay) {
      return customRef((track, trigger) => {
        let timer;
        return {
          get() {
            console.log(`有人从myRef这个容器中读取数据了, 我把${value}给他了`);
            track(); // 通知Vue追踪value的变化(提前和get商量一下, 让它认为value是有用的), 在return之前调用
            return value;
          },
          set(newValue) {
            console.log(`有人把myRef这个容器中的数据改为了: ${newValue}`);
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger(); // 通知Vue去重新解析模板
            }, delay);
          },
        };
      });
    }
    // let keyWord = ref("hello"); // 使用Vue提供的ref
    let keyWord = myRef("hello", 500); // 使用程序员自定义的ref
    return {
      keyWord,
    };
  },
};
</script>
